﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="a.aspx.cs" Inherits="Learn._004CreatingCustmBindings.a" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Scripts/jquery-1.8.2.min.js"></script>
    <script src="../Scripts/sammy.js"></script>
    <script src="../Scripts/knockout-3.3.0.js"></script>
    <%--  --%>
    <link href="../Content/jqueyUi/jquery-ui.css" rel="stylesheet" />
    <script src="../Content/jqueyUi/jquery-1.10.2.js"></script>
    <script src="../Content/jqueyUi/jquery-ui.js"></script>

    <style>
        .starRating span {
            width: 24px;
            height: 24px;
            background-image: url(stars.png);
            display: inline-block;
            cursor: pointer;
            background-position: -24px 0;
        }

            .starRating span.chosen {
                background-position: 0 0;
            }

        .starRating:hover span {
            background-position: -24px 0;
        }

            .starRating:hover span.hoverChosen {
                background-position: 0 0;
            }

        a {
            background-size: cover;
        }
    </style>
</head>
<body>
    <%--<form id="form1" runat="server">
    <div>
    </div>
    </form>--%>
    <h3 data-bind="text: question"></h3>
    <p>Please distribute<b data-bind="text: pointsBudget">points</b></p>
    <table>
        <thead>
            <tr>
                <th>Option</th>
                <th>Importance</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: answers">
            <tr>
                <td data-bind="text: answerText"></td>
                <%--<td>
                    <select data-bind="options: [1, 2, 3, 4, 5], value: points"></select></td>--%>
                <td data-bind="startRating: points"></td>
            </tr>
        </tbody>
    </table>
    <h3 data-bind="fadeVisible: pointsUsed() > pointsBudget">You're used too many points!Please remove some.</h3>
    <p>You've got <b data-bind="text: pointsBudget - pointsUsed()"></b></p>
    <button data-bind="jqButton: true, enable: pointsUsed() <= pointsBudget, click: save">Finished</button>
    <script>
        ko.bindingHandlers.startRating = {
            init: function (element, valueAccessor) {
                $(element).addClass('starRating');
                for (var i = 0; i < 5; i++) {
                    $('<span>').appendTo(element);
                }
                //Hadle mouse events on the stars.
                $("span", element).each(function (index) {
                    $(this).hover(
                            function () {
                                $(this).prevAll().add(this).addClass('hoverChosen')
                            },
                            function () {
                                $(this).prevAll().add(this).removeClass('hoverChosen');
                            }
                        ).click(function () {
                            var observable = valueAccessor();//Get the associated observable
                            //Write the new rating to it
                            observable(index + 1);
                        });
                });
            },
            update: function (element, valueAccessor) {
                //Give this first x stars the 'chosen' class,where x<=rating
                var observable = valueAccessor();
                $('span', element).each(function (index) {
                    $(this).toggleClass('chosen', index < observable())

                });
            }
        };
        ko.bindingHandlers.jqButton = {
            init: function (elemment) {
                $(elemment).button();
                //Turns the element into a jQuery UI button.
            },
            update: function (element, valueAccessor) {
                var currentValue = valueAccessor();
                //Here we just update 'disabled' state,but you
                //could update other properties too
                $(element).button("option", "disabled", currentValue == false);
            }
        };
        ko.bindingHandlers.fadeVisible = {
            init: function (element, valueAccessor) {
                //start visible/invisible according to initial value
                var shouldDisplay = valueAccessor();
                $(element).toggle(shouldDisplay);
            },
            update: function (element, valueAccessor) {
                //On update,fade in/out
                var shouldDisplay = valueAccessor();
                shouldDisplay ? $(element).fadeIn() : $(element).fadeOut();
            }
        }
        function Answer(text) {
            this.answerText = text;
            this.points = ko.observable(1);
        }
        function SurveyViewModel(question, pointsBudget, answser) {
            this.question = question;
            this.pointsBudget = pointsBudget;
            this.answers = $.map(answser, function (text) {
                return new Answer(text);
            });
            this.save = function () {
                alert('To do');
            }
            this.pointsUsed = ko.computed(function () {
                var total = 0;
                for (var i = 0; i < this.answers.length; i++) {
                    total += this.answers[i].points();
                }
                return total;
            }, this);
        }
        ko.applyBindings(new SurveyViewModel("Wich factors affect your technology choices?",
            10,
            [
                'Functionality,complatibility,pricing-all thiat boring stuff',
                'How often it is mentioned on Hacker News',
                'Number of gradients/dropshaows on project hompage',
                'Totally belieable testimonials on  project homepage'
            ]));
    </script>
</body>
</html>
